<template>
  <el-col :span="24">
    <el-col :span="18">
      <h-table-list
        border
        type="local"
        :page-sizes="[10, 20]"
        :data="system_right.rolePage"
        highlight-current-row
        :columns="columns"
        :pagination-info="paginationInfo"
        :form-options="formOptions"
        @row-click="clickCurrentCol"
      />
    </el-col>
    <el-col :span="6">
      <el-col :span="24" class="org-tree-show">
        <OrgTree
          :getCheckedKeys="getCheckedKeys"
          ref="dataTree"
          :action-url="'system_right/rightTree'"
          :show-checkbox="true"
          :show-operate-btn="false"
          :checkbox="system_right.rightOrganIds"
        >
        </OrgTree>
      </el-col>
    </el-col>
  </el-col>
</template>

<script>
import fetchRoleList from "@/api/system";
import OrgTree from "@/components/orgTree/treeForSystem";
import data from "./const";
import { mapState, mapMutations } from "vuex";
import { listTotree } from "@/utils";
export default {
  components: { OrgTree },
  data() {
    return {
      checkbox: [1],
      paginationInfo: {
        sizeChange: (e) => {
          console.log(e);
        },
        currentChange: (e) => {
          console.log(e, "++++e++++");
          this.paginationInfo.current = e;
          this.$store.dispatch(
            "system_right/setListSearchParams",
            Object.assign({}, this.$store.state.system_right.listSearchParams, {
              current: e,
            })
          );
          this.getList(this.$store.state.system_right.listSearchParams);
        },
        current: 1,
        total: 0,
      },
      formOptions: {
        inline: true,
        submitBtnText: "查询",
        showResetBtn: true,
        searchParamsHandler: (params) => {
          console.log("查询", params);
          this.$store.dispatch("system_right/setListSearchParams", params);
          this.getList(params);
        },
        changevalue: (params) => {
          //   const forms=this.formOptions.forms.map(e=>{
          //      const key=e.prop
          //      e.defaultValue=params[key]
          //     return e
          //    })
          //  console.log(forms)
          console.log(params);
          // this.$store.dispatch("system_right/setListSearchParams", params);
        },
        resetBtnCallback: () => {
          this.$store.dispatch("system_right/setListSearchParams", {});
          // this.getList(this.$store.state.system_right.listSearchParams, {});

          this.getList({});
        },
        forms: [
          {
            prop: "empno",
            label: "员工编号",
            defaultValue: "A11",
            itemWidth: 200,
            labelPosition: "right",
            labelWidth: 100,
          },
          {
            prop: "realName",
            label: "姓名",
            itemWidth: 200,
            labelPosition: "right",
            labelWidth: 100,
          },
          {
            prop: "organId",
            label: "归属部门",
            itemType: "cascader",
            labelPosition: "right",
            itemWidth: 200,
            labelWidth: 100,
            options: [],
          },
        ],
      },
      columns: [
        { prop: "empno", label: "员工编号", minWidth: 300, align: "center" },
        { prop: "realName", label: "姓名", minWidth: 300, align: "center" },
        {
          prop: "organName",
          label: "归属部门",
          minWidth: 300,
          align: "center",
        },
      ],
      data,
      tableKey: 3,
      list: [],
      orgData: [
        {
          id: 0,
          label: "祖节点",
          children: [
            {
              id: 1,
              label: "一级 1",
              children: [
                {
                  id: 4,
                  label: "二级 1-1",
                  children: [
                    {
                      id: 9,
                      label: "三级 1-1-1",
                    },
                    {
                      id: 10,
                      label: "三级 1-1-2",
                    },
                  ],
                },
              ],
            },
            {
              id: 2,
              label: "一级 2",
              children: [
                {
                  id: 5,
                  label: "二级 2-1",
                },
                {
                  id: 6,
                  label: "二级 2-2",
                },
              ],
            },
            {
              id: 3,
              label: "一级 3",
              children: [
                {
                  id: 7,
                  label: "二级 3-1",
                },
                {
                  id: 8,
                  label: "二级 3-2",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.formOptions.forms = this.formOptions.forms.map((e) => {
      const key = e.prop;
      const data = this.$store.state.system_right.listSearchParams;
      e.defaultValue = data[key] || "";
      return e;
    });
    // 初始化“归属部门选项”
    this.formOptions.forms[2].options = listTotree(
      this.$store.state.app.allCode.department
    );
    this.getList();
    // 初始化表格项总数
    //this.paginationInfo.total = this.$store.state.system_right.total;
  },
  computed: {
    ...mapState(["system_right", "app"]),
  },
  methods: {
    clickCurrentCol(row, cell, e) {
      console.log("row", row);
      this.$store.dispatch("system_right/setCurrentItem", row);
    },
    getCheckedKeys() {
      console.log("currentItem", this.$store.state.system_right.currentItem);
      this.$store.dispatch("system_right/saveRightOrg", {
        userId: this.$store.state.system_right.currentItem.userId,
        organIds: this.$store.state.system_right.rightTree,
      });
    },
    handleFilter(args) {
      this.listQuery.page = 1;
      this.getList();
    },
    getList(args) {
      // this.listLoading = true

      this.$store.dispatch("system_right/requestRolePage", args).then((res) => {
        this.paginationInfo.total = this.$store.state.system_right.total1;
      });
    },
  },
};
</script>

<style lang="scss">
.org-tree-show {
  background: #f6f8fa;
}
.equipment-detail-button {
  border-bottom: 2px solid #e5e5e5;
  padding: 10px 0;
}
</style>
